<template>
    <div class="layout" ref="MapView">
        <div class="control">
            <RadioGroup v-model="SenceMode" type="button" @on-change="changeSenceMode">
                <Radio label="2D"></Radio>
                <Radio label="3D"></Radio>
            </RadioGroup>
            <br>
            方位角 ： ({{rotation}}°)<Slider v-model="rotation" :min="0" :max="360"></Slider>
        </div>
    </div>
</template>

<script>
import simpleMap from '@best/libs-cli/simpleMap/index.js'

var map = null;
var mapConfig = [{
    "type": "TD",
    "name": "天地图",
    "layerType": "background",
    "url": "https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",
    "default": false
}]

var _Element = null;
var _plane = null;

export default {
    data() {
        return {
            SenceMode: '2D',
            rotation: 0,
        }
    },
    watch: {
        rotation(val) {
            _plane.rotation = - Cesium.Math.toRadians(val)
        }
    },
    mounted() {
        map = simpleMap.initMap(this.$refs.MapView);
        map.addProviders(mapConfig);
        map.flytochina();
        // 创建元素图形图层
        _Element = new simpleMap.ElementDataSource(map, { Click: true });

        // 按照实际距离显示 (也是就是指定点贴图) (单位：米)
        _Element.add('icon', {
            id: 'Icon',
            point: { longitude: 110.0, latitude: 30.0 },  // 图像中心
            image: {
                size: { width: 10000, height: 10000 },
                sizeInMeters: true, // 按照 米  显示图标
                color: '#1898ff',// 图标染色
                url: './image/plane.png',
            },
            // label 图标可以没有文字属性
        });

        // 按照像素大小显示 单位（px）
        _plane = _Element.add('icon', {
            id: 'Icon2',
            point: { longitude: 111.0, latitude: 31.0 },  // 图像中心
            image: {
                size: { width: 32, height: 32 },
                // Offset: [20, 20], // 偏移量 单位：像素 
                color: '#1898ff',// 图标染色
                url: './image/plane.png',
            },
            label: {
                text: 'AAA',
                fontSize: 16,
                color: '#FFFFFF',
                rotation: Cesium.Math.toRadians(this.rotation),
                BGColor: '#000000AA',  // 文字背景颜色
                offset: [0, -32],  // 偏移量 单位：像素
                horizontal: 'CENTER', // 横向对齐属性  LEFT  /  RIGHT  / CENTER
                vertical: 'CENTER'  // 纵向对齐属性  TOP /  BOTTOM  /  CENTER
            }
        });

        _plane.on('Click', (Event) => {
            console.log(Event);
        })

    },
    methods: {
        changeSenceMode(value) {
            map.SenceMode = value;
        },
    },
    beforeDestroy() {

        // 不需要注销地图时，可单独注销图层
        _Element && _Element.Destroy();
        _Element = null;
        // 页面被注销时，销毁地图
        map && map.destroy();
    }
}
</script>

<style>
.layout {
    height: 100%;
    width: 100%;
}
.control {
    position: absolute;
    top: 20px;
    left: 20px;
    background: rgba(0, 0, 0, 0.4);
    padding: 10px 20px;
    color: #fff;
    z-index: 10;
}
</style>